<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的样式操作</title>
		<!-- 元素样式操作：直接操作元素的css属性和属性值
		 css()            功能--
		                  1个参：传入css属性名
						  功能：获取匹配元素集合中第一个元素的css属性
						  2个参：传入css属性名和属性值
						  功能：设置匹配元素集合中所有元素的css属性
						  n个参：传入多个css属性命和属性值
						  语法糖：css({"属性值":"属性值",
						              "属性值":"属性值",
									  .....
									  "属性值":"属性值"
									 })
		 width()和height()  功能：匹配元素集合中第一个元素宽高度
		                    无参：获取匹配元素集合中第一个元素宽高度
							有参：设置匹配元素集合中第一个元素宽高度
							width(数值)
		 outerWidth()和outerHeight()
		 出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		 无参：获取元素的宽高度，计算盒子模型：内边距+边框
		 有参：传入bool值，true时，计算盒子模型：内外边距+边框
		 -->
		<style>
			.box {
				background-color: aqua;
				padding: 20px;
				margin: 20px;
				border: 5px solid red;
			}

			.result {
				margin-top: 10px;
				font-weight: 700;
			}
		</style>
		<script src="../js/jquery-1.11.1.js"></script>
	</head>
	<!-- 创建两个div平行  6个按钮 -->
	<body>
		<!-- css:  .box添加样式：背景颜色、内外边距：20px 边框5px 
		           .result添加样式：上外边距：10px，字体加粗
		    引入jq框架
		-->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色效果</button>
		<button id="setBtn">设置多属性效果</button>
		<button id="gsBtn"> 获取元素高度/设置元素宽度</button>
		<button id="bpBtn">获取高度（内边距+边框）</button>
		<button id="bpmbtn">获取高度（内外边距+外框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击 获取颜色属性值 按钮  获取颜色值并打印页面上*/
			$("#getColorbtn").click(function() {
				//获取css属性值方式：传入属性名即可
				var bgColor = $(".box").css("background-color");
				//页面上打印属性值 ？？
				$("#result").text("获取属性值是：" + bgColor)
			});
			/*2.点击获取颜色属性值 按钮  获取颜色值并打印页面上*/
			$("#setColorbtn").click(function() {
				//改成橙色
				$(".box").css("background-color", "orange");
				$("#result").text("改变后颜色为：橙色");
			});
			/* 3.点击 设置多属性效果 按钮  圆、背景色、阴影*/
						$("#setBtn").click(function() {
							$(".box").css({
								"background-image": "url(../img/000.png)",
								"border": "5px solid #ff0",
								"width": "300px",
								"height": "300px",
								"background-size": "100% 100%",
								"border-radius": "50%",
								"box-shadow": "5px 5px 10px #ff0"
							});
						});
						/*4. 点击  获取、设置宽度*/
						$("#gsBtn").click(function() {
							var w = $(".box").width(400);
							$("#result").text("获取高度是：" + w + "px");
						});
						/*5. 点击 获取高度  按钮  计算box空间高度*/
						$("#bpBtn").click(function() {
							var bp = $(".box").outerHeight(true);
							$("#result").text("获取高度为：" + bp + "px")
						});
						$("#bpmbtn").clickmb(function() {
							var bp = $(".box").outerHeight(true);
							$("#result").text("获取高度为：" + bp + "px")
						});
					</script>
				</body>
			</html>